<template>
  <div class="shadow flex a-c j-c" v-if="show" @click="closeShadow">
    {{visible}}
    <img :src="src" :style="{width:w,height:h}" />
  </div>
</template>

<script>
export default {
  props: ["src", "w", "h", "value"],
  data() {
    return {
      show: this.value,
    };
  },
  methods: {
    closeShadow() {
      this.show = false;
      this.$emit("input", false);
    },
  },
  watch: {
    value() {
      this.show = this.value;
    },
  },
};
</script>

<style scoped lang='scss'>
.shadow {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  background: rgba($color: #000000, $alpha: 0.5);
}
</style>